{{ define "main"}}

<section class="section gallery">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="controls">
					<button type="button" class="control mixitup-control-active" data-filter="all">All</button>
					{{ $categories := slice }}
					{{ range .Params.gallery_items }}
					{{ range .categories }}
					{{ $categories = $categories | append . }}
					{{ end }}
					{{ end }}
					{{ range ( $categories | uniq ) }}
					<button type="button" class="control" data-filter=".{{ . | urlize }}">{{ . | humanize }}</button>
					{{ end }}
				</div>
				<div class="gallery-wrapper">
					{{ range .Params.gallery_items }}
					<div class="gallery-item mix {{range .categories }}{{. | urlize}} {{ end }}">
						<div class="image-block">
							<div class="image">
								<img src="{{ .image | absURL }}" alt="gallery-image" class="img-fluid">
								<div class="primary-overlay">
									<a class="image-popup" data-effect="mfp-with-zoom" href="{{ .image | absURL }}"><i
											class="fa fa-picture-o"></i></a>
								</div>
							</div>
						</div>
					</div>
					{{ end }}
				</div>
			</div>
		</div>
	</div>
</section>

{{ end }}